<template>
	<view class="login-container">
		<!-- 装饰性背景 -->
		<view class="bg-decoration">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
		</view>
		
		<!-- Logo 区域 -->
		<view class="logo-section">
			<view class="logo-wrapper">
				<image class="logo" src="../../common/images/logo/app-logo.png" mode="aspectFit"></image>
			</view>
			<text class="app-name">行者无忧</text>
		</view>
		
		<!-- 登录卡片 -->
		<view class="login-card">
			<view class="card-header">
				<text class="welcome-text">欢迎回来</text>
				<text class="login-prompt">登录以继续精彩旅程</text>
			</view>
			
			<view class="login-form">
				<view class="form-item">
					<view class="input-wrapper">
						<view class="input-icon">
							<image src="../../common/images/login/user-icon.svg" mode="aspectFit"></image>
						</view>
						<input 
							v-model="formData.username" 
							placeholder="请输入账号" 
							placeholder-class="placeholder-style"
							class="input" 
						/>
					</view>
				</view>
				
				<view class="form-item">
					<view class="input-wrapper">
						<view class="input-icon">
							<image src="../../common/images/login/password-icon.svg" mode="aspectFit"></image>
						</view>
						<input 
							v-model="formData.password" 
							placeholder="请输入密码" 
							placeholder-class="placeholder-style"
							:password="!showPassword"
							class="input" 
						/>
						<view class="eye-icon" @click="togglePasswordVisibility">
							<image :src="showPassword ? '../../common/images/login/show-icon.svg' : '../../common/images/login/hiden-icon.svg'" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<button @click="handleLogin" :disabled="isLoading" class="login-btn">
						<text v-if="!isLoading">立即登录</text>
						<text v-else>登录中...</text>
					</button>
				</view>
				
				<view class="form-footer">
					<text class="forgot-password">忘记密码？</text>
					<text class="register-link" @click="gotoRegister">立即注册</text>
				</view>
			</view>
		</view>
		
		<!-- 底部提示 -->
		<view class="bottom-tip">
			<text>登录即表示同意</text>
			<text class="link">《用户协议》</text>
			<text>和</text>
			<text class="link">《隐私政策》</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { userApi } from '@/common/api'

// 表单数据
const formData = ref({
	username: '',
	password: ''
})

// 加载状态
const isLoading = ref(false)

// 密码可见性状态
const showPassword = ref(false)

// 切换密码可见性
const togglePasswordVisibility = () => {
	showPassword.value = !showPassword.value
}

// 登录功能
const handleLogin = async () => {
	// 表单验证
	if (!formData.value.username) {
		uni.showModal({
			title: '提示',
			content: '请输入用户名',
			showCancel: false
		})
		return
	}
	
	if (!formData.value.password) {
		uni.showModal({
			title: '提示',
			content: '请输入密码',
			showCancel: false
		})
		return
	}
	
	// 设置加载状态
	isLoading.value = true
	
	try {
		// 调用登录接口
		const res = await userApi.login({
			username: formData.value.username,
			password: formData.value.password
		})
		
		// 保存token和用户信息
		uni.setStorageSync('token', res.token)
		uni.setStorageSync('userInfo', res.user)
		
		// 显示成功提示
		uni.showToast({
			title: '登录成功',
			icon: 'success',
			duration: 1500
		})
		
		// 延迟后跳转到首页
		setTimeout(() => {
			// 跳转到首页
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}, 1500)
	} catch (error) {
		// 显示错误提示
		uni.showModal({
			title: '登录失败',
			content: error.message || '请检查用户名和密码是否正确',
			showCancel: false
		})
	} finally {
		// 恢复加载状态
		isLoading.value = false
	}
}

// 跳转到注册页
const gotoRegister = () => {
	uni.navigateTo({
		url: '/pages/login/register'
	})
}
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #98c3fd 0%, #b8d4ff 50%, #d5e5ff 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 40rpx;
	position: relative;
	overflow: hidden;
	
	// 装饰性背景圆圈
	.bg-decoration {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 0;
		
		.circle {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.1);
			
			&.circle-1 {
				width: 400rpx;
				height: 400rpx;
				top: -100rpx;
				right: -100rpx;
			}
			
			&.circle-2 {
				width: 300rpx;
				height: 300rpx;
				bottom: 100rpx;
				left: -80rpx;
				background: rgba(255, 255, 255, 0.15);
			}
			
			&.circle-3 {
				width: 200rpx;
				height: 200rpx;
				top: 50%;
				left: 20rpx;
				background: rgba(255, 255, 255, 0.08);
			}
		}
	}
	
	// Logo 区域
	.logo-section {
		margin-top: 120rpx;
		margin-bottom: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1;
		
		.logo-wrapper {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8rpx 24rpx rgba(152, 195, 253, 0.3);
			margin-bottom: 30rpx;
			
			.logo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}
		
		.app-name {
			font-size: 44rpx;
			font-weight: bold;
			color: #ffffff;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}
	}
	
	// 登录卡片
	.login-card {
		width: 100%;
		background: #ffffff;
		border-radius: 40rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 20rpx 60rpx rgba(152, 195, 253, 0.2);
		z-index: 1;
		
		.card-header {
			margin-bottom: 60rpx;
			text-align: center;
			
			.welcome-text {
				font-size: 48rpx;
				font-weight: bold;
				color: #333333;
				display: block;
				margin-bottom: 16rpx;
			}
			
			.login-prompt {
				font-size: 28rpx;
				color: #999999;
				display: block;
			}
		}
		
		.login-form {
			.form-item {
				margin-bottom: 36rpx;
				
				.input-wrapper {
					position: relative;
					display: flex;
					align-items: center;
					background: #f5f8fc;
					border-radius: 24rpx;
					padding: 0 30rpx;
					height: 96rpx;
					transition: all 0.3s ease;
					border: 2rpx solid transparent;
					
					&:focus-within {
						background: #ffffff;
						border-color: #98c3fd;
						box-shadow: 0 0 0 6rpx rgba(152, 195, 253, 0.1);
					}
					
					.input-icon {
						margin-right: 20rpx;
						display: flex;
						align-items: center;
						width: 36rpx;
						height: 36rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.input {
						flex: 1;
						height: 96rpx;
						font-size: 30rpx;
						color: #333333;
						background: transparent;
					}
					
					.eye-icon {
						width: 60rpx;
						height: 60rpx;
						padding: 0 10rpx;
						cursor: pointer;
						display: flex;
						align-items: center;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
			.login-btn {
				width: 100%;
				height: 100rpx;
				background: linear-gradient(135deg, #98c3fd 0%, #7ab3fc 100%);
				color: #ffffff;
				font-size: 34rpx;
				font-weight: bold;
				border-radius: 50rpx;
				border: none;
				box-shadow: 0 8rpx 20rpx rgba(152, 195, 253, 0.4);
				margin-top: 30rpx;
				transition: all 0.3s ease;
				
				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 4rpx 12rpx rgba(152, 195, 253, 0.3);
				}
				
				&:disabled {
					background: linear-gradient(135deg, #c5dcf9 0%, #b0cef5 100%);
					box-shadow: none;
				}
			}
			
			.form-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 40rpx;
				padding: 0 10rpx;
				
				.forgot-password {
					font-size: 26rpx;
					color: #999999;
				}
				
				.register-link {
					font-size: 28rpx;
					color: #98c3fd;
					font-weight: 500;
				}
			}
		}
	}
	
	// 底部提示
	.bottom-tip {
		margin-top: 60rpx;
		margin-bottom: 40rpx;
		text-align: center;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
		z-index: 1;
		
		text {
			margin: 0 4rpx;
		}
		
		.link {
			color: #ffffff;
			font-weight: 500;
			text-decoration: underline;
		}
	}
	
	// placeholder 样式
	.placeholder-style {
		color: #bbbbbb;
		font-size: 28rpx;
	}
}
</style>